<template>
  <section class="layouts-container">
    <div class="layouts-aside" :class="{'isCollapsed':collapsed, 'isImmersive':immersive }">
      <LayoutAside />
    </div>
    <div class="layouts-body">
      <div class="layouts-header"><LayoutHeader /></div>
      <div class="layouts-main"><LayoutMain /></div>
    </div>
  </section>

    <!-- <a-layout class="book-layout">
      <a-layout-sider  v-model:collapsed="collapsed" id="book-layout-aside" :class="{'immersive':immersive }">
        <LayoutAside />
      </a-layout-sider>
      <a-layout>
        <a-layout-header id="book-layout-header">
            <LayoutHeader />
        </a-layout-header>
        <a-layout-content>Content</a-layout-content>
      </a-layout>
    </a-layout> -->
</template>
<script setup>
import { computed } from "vue"
import { useCollapse } from '../hook/index.js';
const { useGetCollapse, useGetImmersive } = useCollapse()
import LayoutAside from "./components/aside/index.vue"
import LayoutHeader from "./components/header/index.vue"
import LayoutMain from "./components/main/index.vue"
const collapsed = computed(() => useGetCollapse())
const immersive = computed(() => useGetImmersive())
</script>